'use client'

import { ReactNode, useState } from 'react'
import { 
  Box, 
  Flex, 
  Icon, 
  Text, 
  useColorModeValue 
} from '@chakra-ui/react'
import { FiFolder, FiChevronDown, FiChevronRight } from 'react-icons/fi'
import { DraggableItem } from './DraggableItem'

export interface Folder {
  id: string;
  name: string;
  items?: any[];
}

interface FolderItemProps {
  folder: Folder;
  isActive?: boolean;
  onSelect: (folderId: string) => void;
  children?: ReactNode;
}

export const FolderItem = ({ 
  folder, 
  isActive,
  onSelect,
  children 
}: FolderItemProps) => {
  const [isOpen, setIsOpen] = useState(false)
  const activeColor = useColorModeValue('red.50', 'red.900')
  const activeBorderColor = useColorModeValue('red.400', 'red.500')
  const hoverBgColor = useColorModeValue('gray.100', 'gray.700')
  
  // 切换文件夹展开/折叠状态
  const toggleFolder = (e: React.MouseEvent) => {
    e.stopPropagation() // 阻止事件冒泡
    setIsOpen(!isOpen)
  }
  
  return (
    <DraggableItem
      id={folder.id}
      type="folder"
      data={folder}
    >
      <Box>
        {/* 文件夹标题 */}
        <Flex 
          p={2} 
          borderRadius="md" 
          bg={isActive ? activeColor : undefined}
          borderLeft={isActive ? "4px" : undefined}
          borderColor={isActive ? activeBorderColor : undefined}
          fontWeight={isActive ? "semibold" : "normal"}
          _hover={{ bg: !isActive ? hoverBgColor : undefined }}
          cursor="pointer"
          onClick={() => onSelect(folder.id)}
          alignItems="center"
        >
          <Icon 
            as={isOpen ? FiChevronDown : FiChevronRight} 
            mr={1}
            fontSize="sm" 
            onClick={toggleFolder}
            cursor="pointer"
          />
          <Icon as={FiFolder} mr={2} color={isActive ? 'red.500' : 'gray.500'} />
          <Text>{folder.name}</Text>
        </Flex>
        
        {/* 子内容 */}
        <Box 
          pl={6} 
          overflow="hidden"
          maxH={isOpen ? "1000px" : "0"}
          transition="max-height 0.3s ease-in-out"
        >
          {children}
        </Box>
      </Box>
    </DraggableItem>
  )
} 